<template>
  <a-card title="公告" :bordered="false" size="medium">
    <template #extra>
      <a-button type="text">查看更多</a-button>
    </template>
    <div :class="noticeItemClass">
      <a-tag color="red">重要</a-tag>
      <div class="flex-1 overflow-hidden text-nowrap text-ellipsis">
        活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知
      </div>
    </div>
    <div :class="noticeItemClass">
      <a-tag color="cyan">活动</a-tag>
      <div class="flex-1 overflow-hidden text-nowrap text-ellipsis">
        活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知
      </div>
    </div>
    <div :class="noticeItemClass">
      <a-tag color="green">消息</a-tag>
      <div class="flex-1 overflow-hidden text-nowrap text-ellipsis">
        活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知
      </div>
    </div>
    <div :class="noticeItemClass">
      <a-tag color="orange">通知</a-tag>
      <div class="flex-1 overflow-hidden text-nowrap text-ellipsis">
        活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知活动通知
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
const noticeItemClass = "flex items-center mb-2 gap-2 last:m-0";
</script>

<style scoped></style>
